<template>
	<view class="order-page">
		<view class="select_data c-flex jc-center  c-item-center" style="position: relative;">
			<uni-datetime-picker class="date-picker" v-model="queryDate" type="datetimerange" :border="false" 
				:clearIcon="false" start="2001-3-20" end="2038-6-20"   placeholder="选择时间" @change="onSeleDatehandlder">
				<view class="">
					{{queryDate?formatTimeStr(queryDate[0])+'~'+formatTimeStr(queryDate[1]):'选择时间'}}
				</view>
			</uni-datetime-picker>	
			<view class="arrow"></view>
		</view>
		<!-- 列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption" @up="upCallback">
			<view class="p-list">
				<view class="p-l-item" v-for="(item,i) in list" :key="i" @click="onViewDetails(item)">
					<view class="title-con c-flex jc-between c-item-center" >
						<view class="c-flex jc-start c-item-center" >
							<image class="time-icon" :src="stockImgUrl+'stock-manage-time.png'"></image>
							<view class="title-1">创建时间：{{item.createTime}} </view>
						</view>
					</view>
					<view class="p-content c-flex c-flex-col" >
						<view class="p-c-item" >
							<text>订单编号: </text><text>{{item.code}}</text>
						</view>
						<view class="p-c-item" >
							<text>出库方: </text><text>{{item.sourceName||''}}</text>
						</view>
						<view class="p-c-item" >
							<text>收货方: </text><text>{{item.targetName||'-'}}</text>
						</view>
						<view class="p-c-item" >
							<text>出库数量: </text><text>{{item.subPlanSingleNum}}瓶</text>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view class="add-bt">
			<image :src="stockImgUrl+'stock-manage-scan.png'" style="width:112rpx;height:112rpx;" mode="" @click="onScan"></image>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {formatDateStr,formatTime} from '@/utils/utils.js';
	export default {
		components: {},
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件，内部已注册onPullDownRefresh)
		data() {
			return {
				content: '是否送达',
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/',
				stockImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/stock/',
				commonUrl: this.$API.IMG_URL + '/common/',
				orderImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/order/',
				code:'',
				downOption:{
					auto:false,
					native: true // 必须配置此项，且需在pages.json配置"enablePullDownRefresh" : true
				},
				upOption:{
					noMoreSize: 4, 
					auto:false,
					empty:{
						tip: '~ 搜索无数据 ~',
						btnText: ''
					}
				},
				page:1,
				limit:10,
				indicatorStyle:`height: 50px;line-height:50px;`,
				list:[
					// {createTime:'2024-04-23 15:21',status:1,orderNo:'33444999945959',targetName:'莒县能源加气站总站',sourceName:'高庄液化气站点',orderNum:'50瓶'},
					// {createTime:'2024-04-23 15:22',status:2,orderNo:'33444999945959',targetName:'莒县能源加气站总站',sourceName:'高庄液化气站点',orderNum:'50瓶'},
				],
				orderId:null,
				queryDate:'',
				stockType:''
			};
		},
		onLoad(options) {
			console.log('onLoad')
			uni.setNavigationBarColor({
				backgroundColor:'#f9ead5',
				frontColor:'#000000'
			});
			this.stockType = options.stockType;
		},
		onShow() {
			console.log('onShow')
			this.initData();
		},
		methods:{
			initData(){
				// uni.showLoading();
				const date = new Date();
				const edate = new Date();
				date.setHours(0);
				edate.setHours(23)
				edate.setMinutes(59)
				let beginTime = '';
				let endTime = '';
				if(this.queryDate && this.queryDate.length>0){
					beginTime = this.queryDate[0];
					endTime = this.queryDate[1];
				}else{
					beginTime = formatDateStr(date);
					endTime = formatDateStr(edate);
					this.queryDate = [beginTime,endTime];
				}
				const params = {pageNum:this.page,pageSize:this.limit,
												stockType:6,beginTime:beginTime,endTime:endTime};
				this.$API.findStockBillList(params).then(res =>{
						// uni.hideLoading();
						//设置列表数据
						if(res.page.current == 1) this.list = []; //如果是第一页需手动制空列表
						const currList  = res.page.records;
						this.list=this.list.concat(currList); //追加新数据
						
						this.mescroll.endBySize(res.page.records.length,res.page.total);//(当前页的数据个数, 总数据量) 判断是否有下一页
						
				}).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
			},
			// 下拉刷新
			downCallback(){
				this.mescroll.resetUpScroll()//重置列表为第一页 
				console.log('down')
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('up')
				this.page = page.num;
				//联网加载数据
				this.initData();
			},
			// // 主动触发下拉刷新
			// triggerDownScroll(){
			// 	this.mescroll.triggerDownScroll()
			// },
			
			formatTimeStr(time){
				return formatTime(time,'yyyy-MM-dd HH:mm');
			},
			//添加出库单
			onScan(){
				const that = this;
				// 允许从相机和相册扫码
				uni.scanCode({
					scanType: ["qrCode"],
					success: (res) => {
						console.log(res);
						if (res.result) {
							that.$API.stockScanCheck({qrCode:res.result,stockType:this.stockType}).then(res=>{
								uni.navigateTo({
									url: './instock-upload?data='+ JSON.stringify(res.data) +'&stockType='+this.stockType
								})
							});
						} else {
							console.log('请重新扫描');
							return false;
						}
					},
					fail: (res) => {
						console.log('未识别到二维码');
					}
				})
			},
			onClose(id){
				const that = this;
				uni.showModal({
					title: '',
					content: '是否关闭此出库单?',
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							that.$API.closeStockOrder(id).then(res => {
								uni.showToast({
									title: "操作成功!"
								})
								that.initData();
							});
						}
					}
				});
			},
			onSeleDatehandlder(e){
				this.queryDate = e;
				this.mescroll.resetUpScroll()//重置列表为第一页 
			},
			onViewDetails(item){
				uni.navigateTo({
					url:'./order-details?item='+ JSON.stringify(item) 
				})
			},
			
		}
	}
</script>
<style>
	page{
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
.order-page{
	position:relative; background-image: linear-gradient(rgba(249, 195, 115, .3) 0%,#F9F9F9 100%);
	.select_data{
		height:80rpx;line-height:80rpx;text-align:center;background: #FFFFFF;margin:0 18rpx;
		border-radius: 20px;font-family: PingFangSC, PingFang SC;font-weight: 400;font-size: 13px;color: #5C666E;
		background: #FFFFFF;border-radius: 16rpx;border: 2rpx solid #FDC274;
	}
	.arrow{
		width: 0;height: 0;border-top: 5px solid #8c8989; border-right: 4px solid transparent;border-left: 4px solid transparent;margin-left: 10rpx;
	}
	.p-list{
		margin: 20rpx 18rpx 0;
		.p-l-item{
			background: #FFFFFF;border-radius: 18rpx;padding: 15rpx 28rpx 20rpx;margin-bottom:20rpx;position:relative;
			.title-con{
				.d_icon{
					margin-right: 10rpx;width: 14rpx;height: 32rpx;background: linear-gradient( 180deg, #F18858 0%, #E86547 100%);transform:skewX(-12deg)
				}
				.time-icon{width: 50rpx;height: 50rpx;    margin-right: 16rpx;}
				border-bottom: 2rpx solid #F7F7F7;padding-bottom: 12rpx;
				.status{width:84rpx;height:38rpx;}
				.title-1{
					font-size: 26rpx;font-family: PingFangSC-Semibold, PingFang SC;font-weight: 400;color: #333333;margin-right: 8rpx;
				}
			}
			.p-content{
				margin: 16rpx 0 16rpx;background: #F9F9F9;border-radius: 16rpx;padding: 24rpx 22rpx;gap:20rpx;
				.p-c-item{
					font-family: PingFang-SC, PingFang-SC;font-weight: 500;
					text:first-child{font-size: 26rpx;color: #666666;display: inline-block;width: 170rpx;}
					text:nth-child(2){font-size: 26rpx;color: #333333;font-weight: 600;}
				}
				
			}
		}
	}
	.add-bt{
		position:fixed;right:20rpx;bottom:10%;
		image{width: 100rpx;height: 100rpx;}
	}
}
</style>
<style>
	uni-icons {
		display: none !important;
	}
	.uniui-calendar {
		display: none !important;
	}
	.uni-icons {
		display: none !important;
	}
	.uni-date__x-input {
		height: 50rpx !important;
		line-height: 50rpx !important;
	}
	.uni-date-x,
	.uni-date__x-input {
		background-color: transparent !important;
		/* padding-right: 51rpx !important; */
		color: #000 !important;
		text-align: center;
		font-size: 26rpx !important;
		padding: 0 0 !important;
	}
</style>